<template>
  <view>
    <scroll-view scroll-y class="page">
      <!-- 头部logo-->
      <view class="UCenter-bg">
        <image
          :src="avatar"
          class="round animation-slide-right margin-bottom-sm avatar"
          mode="scaleToFill"
          :style="[{ animationDelay: '0.1s' }]"
        ></image>
        <view class="username animation-slide-right text-xl text-orange">
          <view class="text-xl">
            {{ userName }}
          </view>
          <view class="text-xl">
            {{ diptName }}
          </view>
        </view>
      </view>
      <view class="padding flex text-center text-grey bg-white shadow-warp">
        <!-- <view
          class="flex flex-sub flex-direction solid-right animation-slide-top"
          :style="[{ animationDelay: '0.2s' }]"
        >
          <view class="text-xl text-orange">{{ personalList.username }}</view>
          <view class="margin-top-sm"
            ><text class="cuIcon-people"></text> 用户</view
          >
        </view> -->

        <!--         <view
          class="flex flex-sub flex-direction animation-slide-top"
          :style="[{ animationDelay: '0.2s' }]"
        >
          <view class="text-xl text-green">{{
            personalList.post ? personalList.post : '员工'
          }}</view>
          <view class="margin-top-sm"
            ><text class="cuIcon-news"></text> 职务</view
          >
        </view> -->
      </view>
      <!-- 列表list-->
      <view
        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"
      >
        <!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
		      <view class="content" >
		        <text class="cuIcon-favorfill text-yellow"></text>
		        <text class="text-grey">收藏</text>
		      </view>
		    </view> -->
        <!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
		      <view class="content">
		        <text class="cuIcon-redpacket_fill text-red"></text>
		        <text class="text-grey">红包</text>
		      </view>
		    </view> -->
        <!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" @tap="scan">
			  <view class="content">
			    <text class="cuIcon-scan text-red"></text>
			    <text class="text-grey">扫码</text>
			  </view>
			</view> -->
        <!-- <navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.4s'}]" url="/pages/user/location" hover-class="none">
				<view class="content" >
				    <text class="cuIcon-location text-cyan"></text>
					<text class="text-grey">定位</text>
				</view>
			</navigator> -->
        <!-- <navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail" :style="[{animationDelay: '0.6s'}]">
			     <view class="content">
				    <text class="cuIcon-settingsfill text-cyan"></text>
					<text class="text-grey">设置</text>
			    </view>
			</navigator> -->
        <navigator
		  v-if="role === 'admin' || role === 'bm'"
          class="cu-item arrow animation-slide-bottom"
          url="/pages/task/task"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-file text-cyan"></text>
            <text class="text-grey">我的任务</text>
			<view class="container" v-if="badgeObj.taskNumber !== 0">
				<view class="icon">
			      <text class="uni-badge">{{badgeObj.taskNumber}}</text>
			    </view>
			</view>
          </view>
        </navigator>
        <navigator
		  v-if="role === 'admin' || role === 'jz'"
          class="cu-item arrow animation-slide-bottom"
          url="/pages/review/review"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-file text-cyan"></text>
            <text class="text-grey">驳回审查</text>
          </view>
        </navigator>
        <navigator
          class="cu-item arrow animation-slide-bottom"
          url="/pages/message/message"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-message text-cyan"></text>
            <text class="text-grey">消息</text>
			<view class="container" v-if="badgeObj.messageNumber !== 0">
				<view class="icon">
			      <text class="uni-badge">{{badgeObj.messageNumber}}</text>
			    </view>
			</view>
          </view>
        </navigator>
		<navigator
		  v-if="role === 'admin' || role === 'bm' || role === 'jz'"
		  class="cu-item arrow animation-slide-bottom"
		  url="/pages/component/signlist"
		  :style="[{ animationDelay: '0.6s' }]"
		>
		  <view class="content">
		    <text class="cuIcon-file text-cyan"></text>
		    <text class="text-grey">报名名单</text>
		  </view>
		</navigator>
		<navigator
		  class="cu-item arrow animation-slide-bottom"
		  url="/pages/component/updatePwd"
		  :style="[{ animationDelay: '0.6s' }]"
		>
		  <view class="content">
		    <text class="cuIcon-settingsfill text-cyan"></text>
		    <text class="text-grey">修改密码</text>
		  </view>
		</navigator>
        <navigator
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.7s' }]"
          url="/pages/common/exit"
          hover-class="none"
        >
          <view class="content">
            <text class="cuIcon-exit text-cyan"></text>
            <text class="text-grey">退出登录</text>
          </view>
        </navigator>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/api/api';
export default {
  name: 'people',
  data() {
    return {
	  role: uni.getStorageSync("userInfo").result.roleCode,
	  userName: uni.getStorageSync("userInfo").result.userInfo.realname,
	  diptName: uni.getStorageSync("userInfo").result.userDeptInfo,
	  avatar: uni.getStorageSync("userInfo").result.userInfo.avatar,
      personalList: {
        avatar: '',
        realname: '',
        username: '',
        post: '',
      },
      positionUrl: '/sys/position/list',
      departUrl: '/sys/user/userDepartList',
      userUrl: '/sys/user/queryById',
      postUrl: '/sys/position/queryByCode',
      userId: '',
      id: '',
	  badgeObj: {
		  messageNumber: 0,
		  taskNumber: 0,
	  },
    };
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        // console.log('watch', this.cur);
        this.userId = this.$store.getters.userid;
        this.load();
      },
    },
  },
  mounted() {
	  this.getBadgeNum();
  },
  methods: {
	getBadgeNum(){
		let data = {};
		api.getTaskNumber(data).then((e) => {
			if (e.data.code == 200) {
				this.badgeObj = e.data.result
			}
		});
	},
    scan() {
      console.log('进来了');
      // #ifndef H5
      uni.scanCode({
        success: function (res) {
          console.log('条码res：' + res);
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        },
      });
      // #endif
      // #ifdef H5
      this.$tip.alert('暂不支持');
      // #endif
    },
    load() {
      if (!this.userId) {
        return;
      }
      // this.$http
      //   .get(this.userUrl, { params: { id: this.userId } })
      //   .then((res) => {
      //     console.log('res', res);
      //     if (res.data.success) {
      //       let perArr = res.data.result;
      //       let avatar =
      //         perArr.avatar && perArr.avatar.length > 0
      //           ? api.getFileAccessHttpUrl(perArr.avatar)
      //           : '/static/avatar_boy.png';
      //       this.personalList.avatar = avatar;
      //       this.personalList.realname = perArr.realname;
      //       this.personalList.username = perArr.username;
      //       this.personalList.depart = perArr.departIds;
      //       this.getpost(perArr.post);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    // getpost(code) {
    //   if (!code || code.length == 0) {
    //     this.personalList.post = '员工';
    //     return false;
    //   }
    //   this.$http
    //     .get(this.postUrl, { params: { code: code } })
    //     .then((res) => {
    //       if (res.data.success) {
    //         this.personalList.post = res.data.result.name;
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
  },
};
</script>
<style scoped>
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
  }
  .icon {
	position: relative;
  }
  .uni-badge {
	position: absolute;
	top: -23px; /* 调整位置 */
	right: -160px; /* 调整位置 */
	background-color: #FF557F;
	color: white;
	height: 20px;
	width: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	font-size: 12px;
  }
</style>
<style>
.UCenter-bg {
  /* #ifdef MP-WEIXIN */
  background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
  /* #endif */
  /* #ifndef MP-WEIXIN */
  background-image: url('../../static/blue.png');
  /* #endif */
  padding: 40upx;
  background-size: cover;
  height: 400rpx;
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.avatar {
  width: 150upx !important;
  height: 150upx !important;
}
.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}
.avatar {
  border: 1px solid #000;
  background-color: #eee;
}
.username {
  margin-left: 40upx;
  min-width: 80upx;
  min-height: 60upx;
  color: #fff;
}
map,
.mapBox {
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  width: 750rpx;
  height: 300rpx;
}
</style>
